<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20canvas面向对象实现动画</title>
</head>
<body>
    <canvas id="oCanvas" width="600" height="700" style="border:1px black solid"></canvas>
</body>

<script>
    // 获取canvas对象
    var canvas = document.getElementById("oCanvas");
    // 通过canvas对象获取 2d对象（画笔对象）
    var ctx = canvas.getContext('2d');

    // 封装开始
    // 创建一个类的构造函数
    function DrawRect(x,y,width,height,color){
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
    }
    // 在这个类的原型中添加方法，，其实也可以添加属性
    // 更新变量
    DrawRect.prototype.update = function(){
        this.x++;
    }
    // 重新绘制
    DrawRect.prototype.reDraw = function(){
        ctx.fillRect(this.x,this.y,this.width,this.height);
    }

    // 实例化对象
    var p1 = new DrawRect(0,100,100,100,'red');
    
    //设置一个定时器
    setInterval(function(){
        // 清除画布
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // 更新变量
        p1.update();
        // 重新绘制
        p1.reDraw();
    },30)

    

    














</script></html>